<template>
  <div class="box">
    <div class="banner">
      <div class="banner-top">详情咨询>></div>
    </div>
    <!-- 核心业务板块 -->
    <div class="BUSINESS">
      <div class="fiveCore-2">Core business segments</div>
      <div class="fiveCore-1">核心业务板块</div>
      <div class="heng"></div>
      <div class="BUSINESS-box">
        <div style="display: flex;justify-content: space-between;margin-top: 88px; ">
          <div class="BUSINESS-item">
            <img src="../../assets/img/组 7665@2x.png" alt="">
            <div class="item-tit">代写标书服务</div>
          </div>
          <div class="BUSINESS-item">
            <div class="item-img"> <img src="../../assets/img/组 7556@2x.png" alt=""></div>
            <div class="item-tit">代做预算服务</div>
          </div>
          <div class="BUSINESS-item">
            <div class="item-img"> <img src="../../assets/img/组 7666@2x.png" alt=""></div>
            <div class="item-tit">投标管理服务</div>
          </div>
          <div class="BUSINESS-item">
            <div class="item-img"> <img src="../../assets/img/组 7667@2x.png" alt=""></div>
            <div class="item-tit">电子标服务</div>
          </div>
        </div>
        <div style="display: flex;justify-content: space-between;margin-top: 88px;">
          <div class="BUSINESS-item">
            <div class="item-img"> <img src="../../assets/img/组 7668@2x.png" alt=""></div>
            <div class="item-tit">投标咨询服务</div>
          </div>
          <div class="BUSINESS-item">
            <div class="item-img"> <img src="../../assets/img/组 7669@2x.png" alt=""></div>
            <div class="item-tit">云端资料库服务</div>
          </div>
          <div class="BUSINESS-item">
            <div class="item-img"> <img src="../../assets/img/组 7670@2x.png" alt=""></div>
            <div class="item-tit">项目推广服务</div>
          </div>
          <div class="BUSINESS-item">
            <div class="item-img"> <img src="../../assets/img/组 7671@2x.png" alt=""></div>
            <div class="item-tit">云端标书模版服务</div>
          </div>
        </div>
      </div>
      <div class="BUSINESS-btn">留下您的手机号，专业老师将尽快和您联系</div>
    </div>
    <!-- 独家优势 -->
    <div class="advantage">
      <div class="fiveCore-2">Exclusive advantage</div>
      <div class="fiveCore-1">独家优势</div>
      <div class="heng"></div>
      <div class="exclusive-1" style="margin-top: 50px;padding-bottom: 40px;">
        <div class="exclusive-box">
           <div class="exclusive-img"><img src="../../assets/img/组 7672@2x.png" alt=""></div>
           <div class="exclusive-tit">收费全公开</div>
        </div>
        <div class="exclusive-box">
           <div class="exclusive-img"><img src="../../assets/img/组 7673@2x.png" alt=""></div>
           <div class="exclusive-tit">全程一对一</div>
        </div>
        <div class="exclusive-box">
           <div class="exclusive-img"><img src="../../assets/img/组 7674@2x.png" alt=""></div>
           <div class="exclusive-tit">海量数据支撑</div>
        </div>
        <div class="exclusive-box">
           <div class="exclusive-img"><img src="../../assets/img/组 7675@2x.png" alt=""></div>
           <div class="exclusive-tit">无条件修改</div>
        </div>
      </div>
      <div class="exclusive-2">
        <div class="exclusive-3">
          <div class="exclusive-4">
             <div class="exclusive-tit1">定制服务</div>
             <div class="exclusive-tit2">根据实际情况一对一定制服务</div>
             <div class="exclusive-img1"><img src="../../assets/img/组 7676@2x.png" alt=""></div>
        </div>
        </div>
        <div class="exclusive-3">
          <div class="exclusive-4">
             <div class="exclusive-tit1">数据支撑</div>
             <div class="exclusive-tit2">拥有数千家成功中标案例的数据库</div>
             <div class="exclusive-img1"><img src="../../assets/img/组 7677@2x.png" alt=""></div>
        </div>
        </div>
        <div class="exclusive-3">
          <div class="exclusive-4">
             <div class="exclusive-tit1">查漏陷阱</div>
             <div class="exclusive-tit2">规避招标文件中的隐蔽陷阱</div>
             <div class="exclusive-img1"><img src="../../assets/img/组 7678@2x.png" alt=""></div>
        </div>
        </div>
      </div>
      <div class="exclusive-2">
        <div class="exclusive-3">
          <div class="exclusive-4">
             <div class="exclusive-tit1">定制服务</div>
             <div class="exclusive-tit2">根据实际情况一对一定制服务</div>
             <div class="exclusive-img1"><img src="../../assets/img/组 7676@2x.png" alt=""></div>
        </div>
        </div>
        <div class="exclusive-3">
          <div class="exclusive-4">
             <div class="exclusive-tit1">数据支撑</div>
             <div class="exclusive-tit2">拥有数千家成功中标案例的数据库</div>
             <div class="exclusive-img1"><img src="../../assets/img/组 7677@2x.png" alt=""></div>
        </div>
        </div>
        <div class="exclusive-3">
          <div class="exclusive-4">
             <div class="exclusive-tit1">查漏陷阱</div>
             <div class="exclusive-tit2">规避招标文件中的隐蔽陷阱</div>
             <div class="exclusive-img1"><img src="../../assets/img/组 7678@2x.png" alt=""></div>
        </div>
        </div>
      </div>
      <div class="BUSINESS-btn">留下您的手机号，专业老师将尽快和您联系</div>
    </div>
    <!-- 服务范围 -->
    <div class="Service">
      <div class="fiveCore-2">Service scope</div>
      <div class="fiveCore-1">服务范围</div>
      <div class="heng"></div>
      <div class="Service-1">标书制作业务全方位覆盖，多位有着丰富行业经验的老师一对一编写，专业度更精准，有效提高中标率</div>
      <div style="width: 1200px;margin: 50px auto;display: flex;justify-content: space-between;">
        <div class="Service-item">
             <div class="item-top">
            
              <span class="z-index:9999">工程类标书</span>
              <div class="item-yuan" style="position: absolute;top: -3px;left: 130px;"></div>
             <div class="item-yuan" style="position: absolute;top: 8px;left: 237px;"></div>
            </div>
         
             <div class="item-box">
              <div class="Service-3">
                <div class="Service-4">
                  <div class="Service-tit">通信标书</div>
               </div>
              </div>
              <div class="Service-3">
                <div class="Service-4">
                  <div class="Service-tit">电力标书</div>
               </div>
              </div>
              <div class="Service-3">
                <div class="Service-4">
                  <div class="Service-tit">电信标书</div>
               </div>
              </div>
              <div class="Service-3">
                <div class="Service-4">
                  <div class="Service-tit">房健标书</div>
               </div>
              </div>
             </div>
             <div class="item-box">
              <div class="Service-3">
                <div class="Service-4">
                  <div class="Service-tit">市政标书</div>
               </div>
              </div>
              <div class="Service-3">
                <div class="Service-4">
                  <div class="Service-tit">土建标书</div>
               </div>
              </div>
              <div class="Service-3">
                <div class="Service-4">
                  <div class="Service-tit">设备标书</div>
               </div>
              </div>
              <div class="Service-3">
                <div class="Service-4">
                  <div class="Service-tit">公路标书</div>
               </div>
              </div>
             </div>
             <div class="item-box">
              <div class="Service-3">
                <div class="Service-4">
                  <div class="Service-tit">桥梁标书</div>
               </div>
              </div>
              <div class="Service-3">
                <div class="Service-4">
                  <div class="Service-tit">隧道标书</div>
               </div>
              </div>
              <div class="Service-3">
                <div class="Service-4">
                  <div class="Service-tit">幕墙标书</div>
               </div>
              </div>
              <div class="Service-3">
                <div class="Service-4">
                  <div class="Service-tit">智能标书</div>
               </div>
              </div>
             </div>
             <div class="item-box">
              <div class="Service-3">
                <div class="Service-4">
                  <div class="Service-tit">桩机标书</div>
               </div>
              </div>
              <div class="Service-3">
                <div class="Service-4">
                  <div class="Service-tit">水利标书</div>
               </div>
              </div>
              <div class="Service-3">
                <div class="Service-4">
                  <div class="Service-tit">装修标书</div>
               </div>
              </div>
              <div class="Service-3">
                <div class="Service-4">
                  <div class="Service-tit">门窗标书</div>
               </div>
              </div>
             </div>
             <div class="item-box">
              <div class="Service-3">
                <div class="Service-4">
                  <div class="Service-tit">园林标书</div>
               </div>
              </div>
              <div class="Service-3">
                <div class="Service-4">
                  <div class="Service-tit">绿化标书</div>
               </div>
              </div>
              <div class="Service-3">
                <div class="Service-4">
                  <div class="Service-tit">铁路标书</div>
               </div>
              </div>
              <div class="Service-3">
                <div class="Service-4">
                  <div class="Service-tit">更多…</div>
               </div>
              </div>
             </div>
        </div>
        <div class="Service-item">
             <div class="item-top">
            
              <span class="z-index:9999">服务类标书</span>
              <div class="item-yuan" style="position: absolute;top: -3px;left: 130px;"></div>
             <div class="item-yuan" style="position: absolute;top: 8px;left: 237px;"></div>
            </div>
         
             <div class="item-box">
              <div class="Service-3">
                <div class="Service-4">
                  <div class="Service-tit">保安服务</div>
               </div>
              </div>
              <div class="Service-3">
                <div class="Service-4">
                  <div class="Service-tit">保洁服务</div>
               </div>
              </div>
              <div class="Service-3">
                <div class="Service-4">
                  <div class="Service-tit">物业服务</div>
               </div>
              </div>
              <div class="Service-3">
                <div class="Service-4">
                  <div class="Service-tit">审计服务</div>
               </div>
              </div>
             </div>
             <div class="item-box">
              <div class="Service-3">
                <div class="Service-4">
                  <div class="Service-tit">旅游服务</div>
               </div>
              </div>
              <div class="Service-3">
                <div class="Service-4">
                  <div class="Service-tit">餐饮服务</div>
               </div>
              </div>
              <div class="Service-3">
                <div class="Service-4">
                  <div class="Service-tit">催债服务</div>
               </div>
              </div>
              <div class="Service-3">
                <div class="Service-4">
                  <div class="Service-tit">招租服务</div>
               </div>
              </div>
             </div>
             <div class="item-box">
              <div class="Service-3">
                <div class="Service-4">
                  <div class="Service-tit">搬迁服务</div>
               </div>
              </div>
              <div class="Service-3">
                <div class="Service-4">
                  <div class="Service-tit">广告服务</div>
               </div>
              </div>
              <div class="Service-3">
                <div class="Service-4">
                  <div class="Service-tit">物流服务</div>
               </div>
              </div>
              <div class="Service-3">
                <div class="Service-4">
                  <div class="Service-tit">食堂服务</div>
               </div>
              </div>
             </div>
             <div class="item-box">
              <div class="Service-3" style="width: 110px;">
                <div class="Service-4" style="width: 110px;">
                  <div class="Service-tit">劳务外包服务</div>
               </div>
              </div>
              <div class="Service-3" style="width: 110px;">
                <div class="Service-4" style="width: 110px;">
                  <div class="Service-tit">外墙清洗服务</div>
               </div>
              </div>
              <div class="Service-3" style="width: 110px; margin-right: 20px">
                <div class="Service-4" style="width: 110px">
                  <div class="Service-tit">物流运输服务</div>
               </div>
              </div>
             </div>
             <div class="item-box">
              <div class="Service-3" style="width: 100px;">
                <div class="Service-4" style="width: 100px;">
                  <div class="Service-tit">营养餐服务</div>
               </div>
              </div>
              <div class="Service-3" style="width: 100px;">
                <div class="Service-4" style="width: 100px;">
                  <div class="Service-tit">水果店服务</div>
               </div>
              </div>
              <div class="Service-3" style="width: 85px; margin-right: 65px">
                <div class="Service-4" style="width: 85px;">
                  <div class="Service-tit">更多…</div>
               </div>
              </div>
             </div>
        </div>
        <div class="Service-item">
             <div class="item-top">
            
              <span class="z-index:9999">采购类标书</span>
              <div class="item-yuan" style="position: absolute;top: -3px;left: 130px;"></div>
             <div class="item-yuan" style="position: absolute;top: 8px;left: 237px;"></div>
            </div>
         
             <div class="item-box">
              <div class="Service-3">
                <div class="Service-4">
                  <div class="Service-tit">服装采购</div>
               </div>
              </div>
              <div class="Service-3">
                <div class="Service-4">
                  <div class="Service-tit">酒店采购</div>
               </div>
              </div>
              <div class="Service-3">
                <div class="Service-4">
                  <div class="Service-tit">食材采购</div>
               </div>
              </div>
              <div class="Service-3">
                <div class="Service-4">
                  <div class="Service-tit">设备采购</div>
               </div>
              </div>
             </div>
             <div class="item-box">
              <div class="Service-3">
                <div class="Service-4">
                  <div class="Service-tit">家具采购</div>
               </div>
              </div>
              <div class="Service-3">
                <div class="Service-4">
                  <div class="Service-tit">建筑采购</div>
               </div>
              </div>
              <div class="Service-3">
                <div class="Service-4">
                  <div class="Service-tit">窗帘采购</div>
               </div>
              </div>
              <div class="Service-3">
                <div class="Service-4">
                  <div class="Service-tit">五金采购</div>
               </div>
              </div>
             </div>
             <div class="item-box">
              <div class="Service-3">
                <div class="Service-4">
                  <div class="Service-tit">耗材采购</div>
               </div>
              </div>
              <div class="Service-3">
                <div class="Service-4">
                  <div class="Service-tit">电路采购</div>
               </div>
              </div>
              <div class="Service-3">
                <div class="Service-4">
                  <div class="Service-tit">厨具采购</div>
               </div>
              </div>
              <div class="Service-3">
                <div class="Service-4">
                  <div class="Service-tit">办公采购</div>
               </div>
              </div>
             </div>
             <div class="item-box">
              <div class="Service-3" style="width: 110px;">
                <div class="Service-4" style="width: 110px;">
                  <div class="Service-tit">床上用品采购</div>
               </div>
              </div>
              <div class="Service-3" style="width: 100px;">
                <div class="Service-4" style="width: 100px;">
                  <div class="Service-tit">变电站采购</div>
               </div>
              </div>
              <div class="Service-3" style="width: 100px; margin-right: 35px">
                <div class="Service-4" style="width: 100px">
                  <div class="Service-tit">殡仪馆采购</div>
               </div>
              </div>
             </div>
             <div class="item-box">
              <div class="Service-3" style="width: 110px;">
                <div class="Service-4" style="width: 110px;">
                  <div class="Service-tit">生活用品采购</div>
               </div>
              </div>
              <div class="Service-3" style="width: 110px;">
                <div class="Service-4" style="width: 110px;">
                  <div class="Service-tit">建筑材料采购</div>
               </div>
              </div>
              <div class="Service-3" style="width: 85px; margin-right:45px">
                <div class="Service-4" style="width: 85px;">
                  <div class="Service-tit">更多…</div>
               </div>
              </div>
             </div>
        </div>
      </div>
      <div class="BUSINESS-btn">留下您的手机号，专业老师将尽快和您联系</div>
    </div>
    <!-- 服务流程 -->
    <div class="process">
      <div class="fiveCore-2">Service process</div>
      <div class="fiveCore-1">服务流程</div>
      <div class="heng" style=""></div>
      <div class="process-box" style="margin-top: 50px;">
           <div class="process-item">
            <div class="process-item-top"><img src="../../assets/img/减去 265@2x.png" alt=""></div>
            <div  class="process-tit">建立订单</div>
            <div  class="process-tit1">输入个人资料，招标文件等信息</div>
           </div>
           <div class="jiantou"></div>
      </div>
    </div>
  </div>
</template>
<script setup>

</script>
<style lang="scss" scoped>
.box {
  width: 100%;
  height: 100%;
}

.banner {
  width: 100%;
  height: 600px !important;
  background: url("../../assets/img/组 7752@2x.png");
  background-repeat: no-repeat;
  /* 不重复 */
  background-position: center center;
  /* 居中 */
  background-size: cover;
  position: relative;
  /* 覆盖整个元素 */
  //   padding: 375px 445px;
}

.banner-top {
  width: 160px;
  height: 40px;
  background: linear-gradient(90deg, #F43107 0%, #FE8D03 100%);
  border-radius: 20px;
  position: absolute;
  top: 375px;
  left: 445px;
  line-height: 40px;
  text-align: center;
  color: #fff;
  font-weight: bold;
  font-size: 16px;

}

.BUSINESS {
  width: 100%;
  height: 665px !important;
  background: url("../../assets/img/组 7590@2x.png");
  background-repeat: no-repeat;
  /* 不重复 */
  background-position: center center;
  /* 居中 */
  background-size: cover;
}

.advantage {
  width: 100%;
  height: 807px !important;
  background: url("../../assets/img/组 7589@2x.png");
  background-repeat: no-repeat;
  /* 不重复 */
  background-position: center center;
  /* 居中 */
  background-size: cover;
}

.Service {
  width: 100%;
  height: 611px !important;
  background: url("../../assets/img/组 7589@2x.png");
  background-repeat: no-repeat;
  /* 不重复 */
  background-position: center center;
  /* 居中 */
  background-size: cover;
}

.process {
  width: 100%;
  height: 833px !important;
  background: url("../../assets/img/蒙版组 590@2x.png");
  background-repeat: no-repeat;
  /* 不重复 */
  background-position: center center;
  /* 居中 */
  background-size: cover;
}

.fiveCore-1 {
  opacity: 1;
  text-align: center;
  height: 34px;
  font-family: Source Han Sans CN;
  font-weight: bold;
  font-size: 34px;
  color: #333333;
  line-height: 0px;
  margin-top: -15px;
  z-index: 1000;
  line-height: 34px;
}

.fiveCore-2 {
  height: 41px;
  font-family: Spotlight DEMO;
  font-weight: bold;
  font-size: 34px;
  color: #DDDDDD;
  line-height: 41px;
  text-align: center;
  padding-top: 62px;
  line-height: 34px;
}

.heng {
  width: 50px;
  height: 4px;
  background: #f43107;
  opacity: 1;
  border-radius: 0px;
  margin: 15px auto;
}

.BUSINESS-box {
  width: 1200px;
  margin: 0 auto;
}

.BUSINESS-item {
  width: 270px;
  background-size: cover;
  transition: transform 0.3s ease-in-out;
  /* 动画持续时间和动画曲线 */
  transform: translateY(0);

  /* 初始状态，div在原位置 */
  img {
    width: 100px;
    height: 100px;
    margin: -50px 85px;
  }
}

.BUSINESS-item:hover {
  transform: translateY(-20px);
  transition: all 0.5s;
}

// .item-img {
//   width: 100px;
//   height: 100px;
//   // margin: -50px auto;

//   img {
//     width: 100%;
//     height: 100%;
//   }
// }
.item-tit {
  width: 270px;
  height: 108px;
  background: #FFFFFF;
  box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
  border-radius: 0px;
  font-family: Source Han Sans CN;
  font-weight: 400;
  font-size: 18px;
  color: #333333;
  text-align: center;
  padding-top: 68px;
}
.BUSINESS-btn{
font-family: Source Han Sans CN;
font-weight: bold;
font-size: 16px;
color: #FFFFFF;
line-height: 38px;
width: 400px;
height: 40px;
background: linear-gradient(90deg, #F43107 0%, #FE8D03 100%);
border-radius: 20px;
text-align: center;
margin: 50px auto;
}
.exclusive-1{
width: 1200px;
margin: 40px auto;
display: flex;
justify-content: space-between;
padding: 0 100px 0 100px;
}
.exclusive-box{
  width: 120px;
  height: 120px;
}
// .exclusive-box :hover{
//  width: 150px;
//  height: 150px;
// margin-top: -15px;
// }
.exclusive-img{
  width: 100%;
  height: 100%;
  img{
    width: 100%;
    height: 100%
  }
}
.exclusive-tit{
  margin-top: 20px;
  text-align: center;
  font-family: Source Han Sans CN;
font-weight: 400;
font-size: 18px;
color: #333333;
}
.exclusive-2{
  width: 1200px;
  margin: 35px auto;
  display: flex;
  justify-content: space-between;
}
// .exclusive-4{
//   width: 380px;
// height: 100px;
// background: #FFFFFF;

// }
.exclusive-3{
  width: 380px;
height: 100px;
background: linear-gradient(180deg, #F43107 0%, rgba(255,255,255,0) 53%, #F43107 100%);
border-radius: 60px;
position: relative;
margin-top: 40px;
}
.exclusive-4{
  width: 380px;
height: 98px;
background: #fff;
border-radius: 60px;
position: absolute;
top: 1px;
padding: 20px 50px;

}
.exclusive-tit1{
  font-family: FZQingKeBenYueSongS-R-GB;
font-weight: 400;
font-size: 26px;
color: #333333;
line-height: 26px;
margin-bottom: 10px
}
.exclusive-tit2{
  font-family: Source Han Sans CN;
font-weight: 400;
font-size: 18px;
color: #A9B1BE;
line-height: 18px;
}

.exclusive-img1{
  width: 80px;
  height: 80px;
  position: absolute;
  right: 50px;
  top: -40px;
  img{
    width: 100%;
    height: 100%;
  }
}
.Service-1{
  height: 18px;
font-family: Source Han Sans CN;
font-weight: 400;
font-size: 18px;
color: #304156;
line-height: 18px;
margin-top: 20px;
text-align: center;
}
.Service-item{
  width: 390px;
  height: 274px;
  padding: 20px 10px;
  background: #FFFFFF;
box-shadow: 0px 8px 8px rgba(0,0,0,0.08);
border-radius: 20px;
}
.item-top{
  width: 390px;
  height: 24px;
font-family: Source Han Sans CN;
font-weight: bold;
font-size: 24px;
color: #304156;
line-height: 24px;
text-align: center;
margin-bottom: 10px;
position: relative;
}
.Service-3{
  width: 85px;
height: 30px;
background: linear-gradient(180deg, #F43107 0%, rgba(255,255,255,0) 53%, #F43107 100%);
border-radius: 20px;
position: relative;
margin-top: 10px;
}
.Service-4{
  width: 85px;
height: 28px;
background: #fff;
border-radius: 20px;
position: absolute;
padding-top: 7px;
text-align: center;
margin-top: 1px;
}
.Service-tit{
  height: 16px;
font-family: Source Han Sans CN;
font-weight: 400;
font-size: 16px;
color: #304156;
line-height: 16px;
}
.item-box{
  display: flex;
  justify-content: space-between;
}
.item-yuan{
  width: 20px;
height: 20px;
border-radius: 50%;
border: 1px solid #F43107;
background-color: rgba(255, 255, 255, 0);
}
.process-box{
  width: 1200px;
  margin: 0 auto;
}
.process-item{
  width: 300px;
height: 217px;
background: #FFFFFF;
border-radius: 8px;
border: 1px solid #F43107;
}
.process-item-top{
  width: 76px;
  height: 48px;
  margin-top: 33px;
  margin-left: 112px;
  img{
    width: 100%;
    height: 100%;
  }
}
.process-tit{
height: 30px;
font-family: Source Han Sans CN;
font-weight: bold;
font-size: 30px;
color: #304156;
line-height: 30px;
text-align: center;
margin-top: 20px;
}
.process-tit1{
height: 18px;
font-family: Source Han Sans CN;
font-weight: 400;
font-size: 18px;
color: #304156;
line-height: 18px;
text-align: center;
margin-top: 20px;
}
</style>